<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	template="/templates/template.xhtml">

	<ui:define name="content">
		<h:head>
			<title>Movimientos</title>
		</h:head>
		<h:body syleClass="body">
			<h:form>

				<p:growl id="messages" showDetail="true" />

				<!-- LIST -->
				<h:panelGroup rendered="#{movimientoView.modo == 'LISTAR'}">
					<p:dataTable var="mov" value="#{movimientoView.movimientos}"
						rows="10" paginator="true" rowsPerPageTemplate="10,25,50"
						paginatorAlwaysVisible="false" paginatorPosition="bottom"
						style="margin:10px">
						<f:facet name="footer">
							<p:toolbar>
								<p:toolbarGroup>
									<p:commandButton icon="ui-icon-plus" title="Agregar"
										label="Agregar" value="Agregar"
										actionListener="#{movimientoView.crear()}" update="@form"
										immediate="true" />
								</p:toolbarGroup>
							</p:toolbar>
						</f:facet>
						<p:column filterBy="#{mov.id}" filterMatchMode="contains"
							headerText="ID">
							<h:outputText value="#{mov.id}" />
						</p:column>
						<p:column filterBy="#{mov.descripcion}" filterMatchMode="contains"
							headerText="Descripcion">
							<h:outputText value="#{mov.descripcion}" />
						</p:column>
						<p:column filterBy="#{mov.monto}" filterMatchMode="contains"
							headerText="Monto">
							<h:outputText value="#{mov.monto}" />
						</p:column>
						<p:column filterBy="#{mov.concepto}" filterMatchMode="contains"
							headerText="Concepto">
							<h:outputText value="#{mov.concepto}" />
						</p:column>
						<p:column filterBy="#{mov.fecha}" filterMatchMode="contains"
							headerText="Fecha">
							<h:outputText value="#{mov.fecha}" />
						</p:column>
						<p:column headerText="Accion" style="width:120px">
							<p:commandButton id="deleteButton" icon="img-button-delete"
								actionListener="#{movimientoView.borrar(mov)}" update="@form" />
							<p:commandButton id="editButton" icon="img-button-edit"
								actionListener="#{movimientoView.editar(mov)}" update="@form" />
						</p:column>
					</p:dataTable>
				</h:panelGroup>

				<!-- ADD -->
				<h:panelGroup id="addGroup"
					rendered="#{movimientoView.modo == 'CREAR' or movimientoView.modo == 'EDITAR'}">
					<h:panelGrid columns="2" cellpadding="5">
						<p:outputLabel value="Descripcion:"></p:outputLabel>
						<p:inputText value="#{movimientoView.movimiento.descripcion}"></p:inputText>
						<p:outputLabel value="Monto:"></p:outputLabel>
						<p:inputText value="#{movimientoView.movimiento.monto}"></p:inputText>
						<p:outputLabel value="Fecha"></p:outputLabel>
						<p:calendar value="#{movimientoView.movimiento.fecha}"></p:calendar>
						<p:outputLabel value="Concepto"></p:outputLabel>
						<p:selectOneMenu value="#{movimientoView.movimiento.concepto}" >
							<f:selectItems var="con" value="#{movimientoView.getConceptos()}" itemLabel="#{con.descripcion}" />
						</p:selectOneMenu>
						<p:commandButton value="Agregar"
							rendered="#{movimientoView.modo == 'CREAR'}"
							actionListener="#{movimientoView.agregar()}" update="@form"></p:commandButton>
						<p:commandButton value="Actualizar"
							rendered="#{movimientoView.modo == 'EDITAR'}"
							actionListener="#{movimientoView.actualizar()}" update="@form"></p:commandButton>
						<p:commandButton value="Cancelar"
							actionListener="#{movimientoView.cancelar()}" update="@form"></p:commandButton>
					</h:panelGrid>
				</h:panelGroup>

			</h:form>
		</h:body>

	</ui:define>

</ui:composition>